<!DOCTYPE html>

<html lang="en" data-content_root="../../">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Tutorials &#8212; Pytch  documentation</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=03e43079" />
    <link rel="stylesheet" type="text/css" href="../../_static/classic.css?v=36340f97" />
    <link rel="stylesheet" type="text/css" href="../../_static/css/pytch-classic.css?v=0321735e" />
    
    <script src="../../_static/documentation_options.js?v=7f41d439"></script>
    <script src="../../_static/doctools.js?v=9bcbadda"></script>
    <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
    
    <link rel="icon" href="../../_static/favicon.ico"/>
    <link rel="author" title="About these documents" href="../../about.html" />
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Testing" href="testing.html" />
    <link rel="prev" title="Environment variables" href="environment-variables.html" /> 
  </head><body>
<div class="NavBar">
  <a href="../../../app/"><h1>Pytch</h1></a>
  <ul>
    <a href="https://pytch.scss.tcd.ie/"><li>About Pytch</li></a>
    <a href="../../index.html"><li>Help</li></a>
    <a href="../../../app/tutorials/"><li>Tutorials</li></a>
    <a href="../../../app/my-projects/"><li>My projects</li></a>
  </ul>
</div>
<div class="warning-work-in-progress">
  <p>These help pages are incomplete — we are working on it!</p>
</div>
  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <section id="tutorials">
<h1>Tutorials<a class="headerlink" href="#tutorials" title="Link to this heading">¶</a></h1>
<p>A tutorial arrives as a lump of HTML, where each chapters is its own
<code class="docutils literal notranslate"><span class="pre">DIV</span></code> within a top-level <code class="docutils literal notranslate"><span class="pre">DIV</span></code>.  The first ‘chapter’ is the <em>front
matter</em>, which contains the introduction and usually a marker for
where a ‘<em>Try the project!</em>’ button should be placed.  [In future, we
might change this representation to JSON or similar, because the
current arrangement requires jumping through a few hoops to get it
into the React world.]</p>
<p>The webapp records which tutorial (if any) a given project is
<em>tracking</em>.  The information stored is the <em>slug</em> of the tutorial and
the current chapter index.  When such a project is made active, the
actual tutorial content is loaded from the backend, as identified by
the slug.  [In future, a more formal identifier might be used instead
of this slug.]</p>
<section id="list-of-available-tutorials">
<h2>List of available tutorials<a class="headerlink" href="#list-of-available-tutorials" title="Link to this heading">¶</a></h2>
<p>On first presentation of the tutorials list, a <code class="docutils literal notranslate"><span class="pre">tutorial-index.html</span></code>
file is fetched.  The base URL is controlled by the environment
variable <code class="docutils literal notranslate"><span class="pre">REACT_APP_TUTORIALS_BASE</span></code> and is different for development
vs production deployments.</p>
<p>That HTML file contains one <code class="docutils literal notranslate"><span class="pre">DIV</span></code> of class <code class="docutils literal notranslate"><span class="pre">tutorial-summary</span></code> per
available tutorial, which contains various pieces of metadata as well
as the actual content of the summary, usually including reference to a
screenshot.</p>
</section>
<section id="active-project-s-tracked-tutorial">
<h2>Active project’s tracked tutorial<a class="headerlink" href="#active-project-s-tracked-tutorial" title="Link to this heading">¶</a></h2>
<p>If there is a currently-active project, this state is held at
<code class="docutils literal notranslate"><span class="pre">activeProject.project</span></code>.  Within this, there is optionally:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">activeProject</span><span class="o">.</span><span class="n">project</span><span class="o">.</span><span class="n">trackedTutorial</span>
</pre></div>
</div>
<p>containing the <em>content</em> and <em>active chapter index</em>.</p>
<p>The chapter index is initialised when loading a project, updated as
the user navigates through the tutorial, and saved to backend storage
when the user clicks <em>Save</em>.  It is also set by the live-reload
mechanism; see next.</p>
</section>
<section id="live-reload-for-tutorial-developers">
<h2>Live-reload (for tutorial developers)<a class="headerlink" href="#live-reload-for-tutorial-developers" title="Link to this heading">¶</a></h2>
<p>When using the live-reload facility, the lump of HTML is sent over the
web-socket to the browser, rather than the browser requesting it.
From there, the processing is mostly the same.  One difference is that
the in-development HTML can contain a marker signifying which chapter
is currently being worked on, and the webapp selects that chapter, and
sets the content of the code editor to be the code as of the most
recent commit mentioned strictly before the start of that chapter.</p>
</section>
</section>


            <div class="clearer"></div>
          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="Main">
        <div class="sphinxsidebarwrapper"><ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../user/index.html">Using the Pytch web app</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../vm/user/index.html">Writing Pytch programs</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../about.html">About Pytch</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../contact.html">Contact</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="../../developer.html">Developer documentation</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../../developer/development-setup.html">Development setup</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/design-overview.html">Design overview</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../vm/developer/index.html">VM</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="index.html">Webapp</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="index.html#top-level-routes">Top-level routes</a></li>
<li class="toctree-l3 current"><a class="reference internal" href="index.html#individual-aspects-of-design">Individual aspects of design</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../medialib/developer/index.html">Media library</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/index.html">Website</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../build-tools/index.html">Tools</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../source-build.html">Source and build information</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../releases/changelog.html">Changelog</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../legal/index.html">Legal information</a></li>
</ul>
<div class="docs-home-link"><hr>
  <ul>
    <li>
      <a href="../../index.html">Pytch help home</a>
    <li>
  </ul>
</div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  </body>
</html>